<template>
    <div class="newperson_title">
        <text>新人专享礼</text>
    </div>
    <div class="content_wrapper">
        <div class="content_left">
            <div class="name">新人专享礼包</div>
            <div class="imgwrapper">
                <img src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="">
            </div>
        </div>
        <div class="content_right">
            <div class="content_right_top">
                <div class="textwrapper">
                    <div class="text1">
                        <text>福利社</text>
                    </div>
                    <div class="text2">
                        <text>今日特价</text>
                    </div>
                </div>
                <div class="imgwrapper">
                    <img src="https://yanxuan-item.nosdn.127.net/8352c23d2f4df74933f0e0b655b10ede.png?quality=75&type=webp&imageView&thumbnail=200x200"
                        alt="">
                </div>
            </div>
            <div class="content_right_bottom">
                <div class="textwrapper">
                    <div class="text1">
                        <text>新人拼团</text>
                    </div>
                    <div class="text2">
                        <text>1元起包邮</text>
                    </div>
                </div>
                <div class="imgwrapper">
                    <img src="https://yanxuan-item.nosdn.127.net/18daf84aa0ea093bfa7ff4a4961b238c.png?quality=75&type=webp&imageView&thumbnail=200x200"
                        alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>

</script>
 
<style lang="less">
.newperson_title {
    width: 375px;
    height: 45px;
    text-align: center;
    line-height: 45px;

    text {
        font-size: 16px;
        color: #333333;
        font-family: PingFangSC-Regular;
        position: relative;

        &::before {
            content: "";
            line-height: 45px;
            position: absolute;
            width: 12px;
            top: 10.4px;
            left: -20px;
            height: 1.5px;
            background: #333;
            font-size: 16px;
        }

        &::after {
            content: "";
            line-height: 45px;
            position: absolute;
            width: 12px;
            top: 10.4px;
            right: -20px;

            height: 1.5px;
            background: #333;
            font-size: 16px;
        }
    }
}

.content_wrapper {
    width: 375px;
    height: 219px;
    // background-color: #bfa;
    padding-left: 15px;
    box-sizing: border-box;

    .content_left {
        float: left;
        background-color: #f9e9cf;
        width: 171.5px;
        height: 217px;
        margin-right: 2px;

        .name {
            padding-left: 15px;
            padding-top: 15px;
            font-size: 16px;
        }

        .imgwrapper {
            // position: relative;
            margin: 5.18px 21.25px;

            img {
                width: 129px;
                height: 128.5px;
            }
        }
    }

    .content_right {
        float: left;
        background-color: #f9e9cf;
        width: 171.5px;
        height: 219px;

        .content_right_top {
            float: left;
            background-color: #fbe2d3;
            width: 171.5px;
            height: 107.5px;
            margin-bottom: 1px;
            padding-top: 10px;
            padding-left: 15px;
            display: flex;
            box-sizing: border-box;

            .textwrapper {
                float: left;

                .text1 {
                    font-size: 16px;
                    font-family: PingFangSC-Medium;
                    white-space: nowrap;
                }

                .text2 {
                    font-size: 12px;
                    color: #7f7f7f;
                }

            }

            .imgwrapper {
                float: right;

                img {
                    width: 100px;
                    height: 100px;
                }
            }
        }

        .content_right_bottom {
            float: left;
            background-color: #ffecc2;
            width: 171.5px;
            height: 107.5px;
            padding-top: 10px;
            padding-left: 15px;
            display: flex;
            box-sizing: border-box;

            .textwrapper {
                float: left;

                .text1 {
                    font-size: 16px;
                    font-family: PingFangSC-Medium;
                    white-space: nowrap;
                }

                .text2 {
                    font-size: 12px;
                    color: #7f7f7f;
                }

            }

            .imgwrapper {
                float: right;

                img {
                    width: 100px;
                    height: 100px;
                }
            }
        }
    }
}
</style>
